<template>
	<div class="container">
		<el-page-header @back="$router.go(-1)" content="">
		</el-page-header>
		<div class="main">
			<!-- 步骤条 -->
			<el-steps :active="active" finish-status="success" >
			  <el-step title="基础信息"></el-step>
			  <el-step title="关键信息"></el-step>
			  <el-step title="提交信息"></el-step>
			</el-steps>
			<!-- 提交信息表单 -->
			<el-form  :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px"   class="demo-ruleForm">
			  <div v-show="active==0">
			  <!-- <el-form-item label="性别">
			      <el-select v-model="validateForm.gender" placeholder="性别">
			        <el-option label="男" value="men"></el-option>
			        <el-option label="女" value="women"></el-option>
			      </el-select>
			    </el-form-item>
			  <el-form-item label="年龄">
			      <el-select v-model="validateForm.age" placeholder="年龄">
			        <el-option v-for="(item,index) in age_list" :key="index" :label="item" :value="item" ></el-option>
			      </el-select>
			    </el-form-item>
			  <el-form-item label="身高">
			      <el-select v-model="validateForm.height" placeholder="身高(cm)">
			        <el-option v-for="(item,index) in height_list" :key="index" :label="item" :value="item" ></el-option>
			      </el-select>
			    </el-form-item>
			  <el-form-item label="体重">
			      <el-select v-model="validateForm.weight" placeholder="体重(kg)">
			        <el-option v-for="(item,index) in weight_list" :key="index" :label="item" :value="item" ></el-option>
			      </el-select>
			    </el-form-item> -->
					<el-form-item label="昵称" prop="username">
						<el-input v-model="addForm.username"></el-input>
					</el-form-item>
					<el-form-item label="性别" prop="gender">
						<el-radio-group v-model="addForm.gender">
							<el-radio label="男"></el-radio>
							<el-radio label="女"></el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="生日" required >
						<el-form-item prop="date">
							<el-date-picker type="date" placeholder="请选择日期" v-model="addForm.date" style="width: 100%;">
							</el-date-picker>
						</el-form-item>
					</el-form-item>
					<el-form-item label="身高/cm" prop="height">
						<el-input v-model.number="addForm.height"></el-input>
					</el-form-item>
					<el-form-item label="体重/斤" prop="weight">
						<el-input v-model.number="addForm.weight"></el-input>
					</el-form-item>
					<el-form-item >
						<el-button type="primary" @click="submitForm('addFormRef')">确定</el-button>
						<el-button @click="resetForm('addFormRef')">重置</el-button>
					</el-form-item>
			 <!-- <el-form-item>
			      <el-button type="primary" @click="next">确定</el-button>
			    </el-form-item> -->
			  </div>
			  <div v-show="active==1">
			  <el-form-item label="关键信息">
				    <el-select v-model="validateForm.keyword" placeholder="关键信息">
				      <el-option v-for="(item,index) in keyword_list" :key="index" :label="item" :value="item" ></el-option>
				    </el-select>
				</el-form-item>
			  <el-form-item>
				    <el-button type="primary" @click="next">确定</el-button>
				  </el-form-item>
			  </div>
			  <div v-show="active==2">
			  <el-form-item>
					<el-button :plain="true" @click="open">点此提交信息</el-button>
			  	</el-form-item>
			  </div>
			</el-form>
			<!-- 膳食建议区域 -->
			<div class="suggest-info" v-show="active==3">
				<el-tag type="success">关 键 词</el-tag>
				 <el-link :underline="false" type="warning">{{suggest_data.keyword}}</el-link>
				<br>
				<el-tag>重点建议</el-tag>
				<ul>
					<li v-for="key in suggest_data.keysuggest" :key="key"><el-link :underline="false" type="danger">{{key}}</el-link></li>
				</ul>
				<el-tag type="info">其他建议</el-tag>
				<ul>
					<li v-for="key in suggest_data.othertips" :key="key"><el-link :underline="false" type="success">{{key}}</el-link></li>
				</ul>
				<el-tag type="success">早餐</el-tag>
				<el-link :underline="false" type="primary">{{suggest_data.breakfast}}</el-link>
				<br>
				<el-tag type="danger">中餐</el-tag>
				<el-link :underline="false" type="primary">{{suggest_data.lunch}}</el-link>
				<br>
				<el-tag type="warning">晚餐</el-tag>
				<el-link :underline="false" type="primary">{{suggest_data.dinner}}</el-link>
			</div>
			<!-- <el-button style="margin-top: 12px;" @click="next" v-show="active!=3">下一步</el-button> -->
		</div>
	</div>
</template>

<script>
export default {
	    data () {
	      return {
	        active: 0,
      validateForm: {
        // gender: '',
        // age: '',
        // height: '',
        // weight: '',
        keyword: ''
      },
	  addForm: {
	    username: '刘清华',
	    gender: '男',
	    date: '',
	    weight: 180,
	    height: 120
	  },
	  addFormRules: {
	    username: [{
	      required: true,
	      message: '请输入昵称',
	      trigger: 'blur'
	    },
	    {
	      min: 2,
	      max: 10,
	      message: '长度在 2 到 10 个字符',
	      trigger: 'blur'
	    }
	    ],
	    gender: [{
	      required: true,
	      message: '请选择性别',
	      trigger: 'change'
	    }],
	    date: [{
	      required: true,
	      message: '请选择出生日期',
	      trigger: 'change'
	    }],
	    height: [{
	      required: true,
	      message: '请输入身高',
	      trigger: 'blur'
	    },
	    {
	      type: 'number',
	      message: '身高必须为数字值'
	    }
	      //     {
	  		  // min: 2,
	  		  // max: 3,
	  		  // message: '身高应该在 10cm 到 260cm 之间',
	  		  // trigger: 'blur'
	      //     }
	    ],
	    weight: [{
	      required: true,
	      message: '请输入体重',
	      trigger: 'blur'
	    },
	    {
	      type: 'number',
	      message: '体重必须为数字值'
	    }
	      //     {
	  		  // min: 5,
	  		  // max: 400,
	  		  // message: '体重应该在 5斤 到 400斤 之间',
	  		  // trigger: 'blur'
	      //     }
	    ]
	  },
	  suggest_data: {
        keyword: '学龄儿童',
        keysuggest: {
          1: '1.吃好早餐:每天吃早餐,并保证早餐的营养充足。可结合本地饮食习惯,丰富早餐品种,保证早餐营养质量。',
          2: '2.选择多种多样的蔬菜、水果,深色蔬菜最好占到一半以上。天天吃水果',
          3: '3.优先选择鱼和禽,要吃瘦肉。鸡蛋不要丢弃蛋黄',
          4: '4.天天喝奶:为满足骨骼生长的需要, 要保证每天喝奶及奶制品300ml或相当量 奶制品,可以选择鲜奶、酸奶、奶粉或奶酪。',
          5: '5.足量饮水:每天少量多次、足量喝水。6岁至10岁儿童每天800~ 1000ml,11~17岁儿童每天1100~1400ml。'
        },
        othertips: {
          1: '1.培养清淡饮食习惯',
          2: '2.每天饮用水1000-1500ml,喝白开水',
          3: '3.吃动平衡；鼓励户外运动或游戏,每天最好进行60分钟活动,如快跑,篮球,足球,体操,游泳等'
        },
        breakfast: '肉末花卷(面粉50g,瘦猪肉10g),白煮蛋1个(鸡蛋30g),香蕉(100-150g),牛奶1杯(200-250g)',
        lunch: '米饭(大米150g),青椒肉丝(猪肉50g,柿子椒100g),清炒油菜(油菜150g),酸奶200-250g',
        dinner: '蛋炒饭(大米125g,鸡蛋10g),虾仁豆腐(虾仁25g,豆腐50g),山药炒肉(山药75g,猪肉25g)菠菜猪肝汤(菠菜100g,猪肝5g)'
      }
	      }
	    },

	    methods: {
    submitForm (formName) {
			  this.$refs[formName].validate((valid) => {
			    if (valid) {
			      localStorage.setItem('userinfo', JSON.stringify(this.addForm))
				  //  保存成功，默认点击了一次成功按钮
				  this.next()
			    } else {
			      console.log('error submit!!')
			      return false
			    }
			  })
    },
    resetForm (formName) {
			  console.log(formName)
			  this.addForm = {
			    username: '',
			    gender: '',
			    date: '',
			    weight: '',
			    height: ''
			  }
			  this.$refs[formName].resetFields()
    },
	      next () {
	        if (this.active++ > 2) this.active = 0
	      },
		  open () {
      if (this.addForm.username === '' || this.addForm.gender === '' || this.addForm.date === '' || this.addForm.height === '' || this.addForm.weight === '' || this.validateForm.keyword === '') {
        this.$message.error('提交信息错误，有未选择的选项')
        this.active = 0
      } else {
		  this.$message({
		            message: '成功，正在生成膳食建议',
		            type: 'success'
		          })
	    console.log(this.validateForm)
        this.active = 3
	  }
		  }
	    },
  computed: {
    // age_list: function () {
			 //  var list1 = []
			 //  for (var i = 0; i <= 100; i++) {
			 //    list1.push(i)
			 //  }
			 //  return list1
    // },
    // height_list: function () {
			 //  var list1 = []
			 //  for (var i = 30; i <= 220; i++) {
			 //    list1.push(i)
			 //  }
			 //  return list1
    // },
    // weight_list: function () {
			 //  var list1 = []
			 //  for (var i = 10; i <= 150; i += 2) {
			 //    list1.push(i)
			 //  }
			 //  return list1
    // },
    keyword_list: function () {
      return ['学龄儿童', '成年女性', '成年男性', '成年男性（高运动量）', '备孕妇女', '孕妇', '哺乳期妇女', '学龄前儿童', '老年人', '素食人群']
    }
  },
  created () {
  	  var addfrom = JSON.parse(localStorage.getItem('userinfo'))
  	  if (addfrom) {
  		  this.addForm = addfrom
  	  }
	  // else {
		 //  location.href = '/#/userinfo'
	  // }
  }
	  }
</script>

<style scoped>
	/* 全局导入公共样式 */
	@import url("../assets/css/common.css");

	p {
		margin: 0;
		padding: 0;
	}

	.container {
		width: 10rem;
		height: 5.625rem;
		margin: 0 auto;
		background: url(../assets/images/goods_bg1.png);
		background-size: 100% 100%;
		border: 1px solid #797979;
		opacity: 0.9;
	}

	.main {
		width: 5.625rem;
		height: 4.2375rem;
		margin: 0.7825rem auto;
		overflow: auto;
	}
	ul{
		margin: 0;
		list-style: none;
	}
	.el-form{
		width: 4rem;
		margin-top: 0.25rem;
	}
	.el-form .el-form-item .el-input{
		width: 208px;
	}
	.el-form .el-form-item .el-form-item .el-date-editor{
		width: 208px !important;
	}
	.el-tag{
		width: 0.9rem;
		text-align: center;
		margin: 0.125rem;
		margin-left: 0;
		font-size: 0.0875rem;
	}
	.el-link{
		font-size: 0.1125rem;
		letter-spacing: 0.05rem;
		line-height: 0.2rem;
		font-weight: bold;
	}
	.el-link[type='warning']{
		font-size: 0.15rem;
	}
</style>
